<template>
  <div>
    <homeHead
      :showLeft="true"
      :name="homeName"
    ></homeHead>
    <div class="viewport">
      <div class="top1">
        <img src="@/assets/img/background-index.png" alt="" />
      </div>

      <div class="bo1">
        <div class="title">
          {{detailData[0].题名}}
        </div>
        <!-- <p class="nature">lmplementing Fine Management to Ensure SafeOperation of Oil Pipeline</p>  -->
        <p class="nature">{{detailData[0].作者}}</p> 
        <p class="nature">{{detailData[0].出版单位}}</p> 
        <p class="nature">发表时间：{{detailData[0].发表时间}}</p> 
        <!--<p class="nature">下载:0 
        <span class="right">被引:0</span> </p> -->
      </div>
      <div class="bo1 bo2">
        <div class="title">
            <span class="iconfont">&#xe607;</span>
           文献类型
        </div>
        <p class="nature">机构：{{detailData[0].机构}}</p> 
        <p class="nature">摘要：{{detailData[0].摘要}}</p> 
        <p class="nature">关键词：{{detailData[0].关键词}}</p> 
      </div>
      <div class="bo1 bo2 bo3">
        <div class="title">
            <span class="iconfont">&#xe619;</span>
           相似文献
        </div>
        <p class="nature" v-for="(item,index) in listData" :key="index">
         {{index+1}}、{{item.题名}}  
        </p> 
      </div> 
      <div class="last">
          <!-- <button>
            Epub下载
          </button>
          <button>
            CAJ下载
          </button>
          <button>
            在线阅读
          </button> -->
      </div>
    </div>
  </div>
</template>
<script>
import homeHead from "./searchHead.vue";
import {getCnkiDetail,GetSimilarWenXian} from "@/api/home";
import { Toast, MessageBox } from "mint-ui";
export default {
  watch: {},
  name: "seachResult",
  data() {
    return {
      homeName: "详情页", 
      detailData:[],
      queryObject:{}, 
      listData:[],
    };
  },
  created() {   
  
    this.queryObject = JSON.parse(this.$route.query.data);  
    if(!this.queryObject.dbcode) {
      this.queryObject.dbcode = this.$route.query.tableName; 
    }
   
    this.homeName = this.$route.query.name; 
  },
  mounted() {
    this.getDetail();
    this.getSimilar();
  },
  methods: {
    // 获取详情
    getDetail() {
      getCnkiDetail({
        dbcode:this.queryObject.dbcode,
        filename:this.queryObject.fileName,
        dbname:this.queryObject.dbname,
      }).then(res=>{
          this.detailData = JSON.parse(res.data.data);
      })
    },
    // 获取相似文献
    getSimilar() {
      GetSimilarWenXian({
        dbcode:this.queryObject.dbcode,
        filename:this.queryObject.fileName,
        vsm:this.queryObject.vsm,
      }).then(res=>{ 
        this.listData = JSON.parse(res.data.data)
      })     
    }

  },
  components: {
    homeHead: homeHead,
  },
};
</script>
<style lang="scss" scoped>
.viewport {
  width: 100%;
  min-height:calc(100vh - 60px);
  background:#fff;
  .top1 {
    width: 100%;
    height: 100px;
    overflow: hidden; 
    img {
      width: 100%;
      height: 100%;
    }
  }
  .bo1 {
    width: 95vw;
    margin:-30px auto;
    min-height: 220px;
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.19), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center; 
    position: relative;
    background:#fff;
    z-index:999999;
    padding:10px 0; 
    box-sizing: border-box; 
    border-radius:5px;
  }

  .title { 
    font-size:16px;
    font-weight: bold;
    margin-bottom: 20px;
  }
  .nature { 
    width:100%;
    text-align: left;
    padding:0 10px;
    font-size:14px; 
    box-sizing: border-box;  
    color:#999;
    .right {
      float: right;
    }
  }   
  .bo1:nth-child(2) {
    border-radius:0px 0px 5px 5px;
  }
  .bo1:nth-child(3) {
    border-radius: 5px 5px 0 0;
  }
  .bo2 {
    margin-top:40px; 
    .title {
      padding:0 10px ; 
      box-sizing: border-box;
      text-align: left; 
      .iconfont {
        margin-right:10px;
        color:#afafaf;
      }
    }
  }
  .bo3 {
    margin-top:45px;   
    margin-bottom:50px;
    .nature {
      margin:10px 0 5px 0;
    }   
  } 
  .last {
    width:100%;
    height: 50px;
    display: flex; 
    position: fixed;
    line-height: 50px;
    bottom:0;
    justify-content: space-evenly;
    align-items: center; 
    z-index:9999;
    button {
      color:#7ea3e2;
      border:1px solid #ddd;
      background:#fff;
      display: inline-block;
      width:80px;
      height:30px;
    }

  }
}
</style>